/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    --spectrum-infield-button-height: var(--spectrum-component-height-100);
    --spectrum-infield-button-width: var(--spectrum-component-height-100);
    --spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding);
    --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill);
    --spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill);
    --spectrum-infield-button-fill-padding: 0px;
    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium);
    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium);
    --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default);
    --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
    --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down);
    --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
    --spectrum-infield-button-fill-justify-content: center;
}

:host([disabled]) {
    --mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color));
    --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
    --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color));
    --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-infield-button-border-color));
    --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color));
    --mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
    --mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
    --mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color));
}

:host([size="s"]) {
    --spectrum-infield-button-height: var(--spectrum-component-height-75);
    --spectrum-infield-button-width: var(--spectrum-component-height-75);
    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small);
    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small);
}

:host([size="l"]) {
    --spectrum-infield-button-height: var(--spectrum-component-height-200);
    --spectrum-infield-button-width: var(--spectrum-component-height-200);
    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large);
    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large);
}

:host([size="xl"]) {
    --spectrum-infield-button-height: var(--spectrum-component-height-300);
    --spectrum-infield-button-width: var(--spectrum-component-height-300);
    --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large);
    --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
    --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large);
}

:host([block="end"]),
:host([block="start"]) {
    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium));
}

:host([block="end"][size="s"]),
:host([block="start"][size="s"]) {
    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small));
}

:host([block="end"][size="l"]),
:host([block="start"][size="l"]) {
    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large));
}

:host([block="end"][size="xl"]),
:host([block="start"][size="xl"]) {
    --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large));
}

:host([quiet]) {
    --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent);
    --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent);
    --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent);
    --mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent);
    --mod-infield-border-color: var(--mod-infield-border-color-quiet, transparent);
    --mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0);
}

:host([quiet][disabled]) {
    --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent);
    --mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent);
}

@media (hover: hover) {
    :host(:hover) {
        --mod-infield-button-background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover));
        --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover));
    }
}

:host(:is(:active, [active])) {
    --mod-infield-button-background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down));
    --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down));
}

:host(:focus-visible) {
    --mod-infield-button-background-color: var(--mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus));
    --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus));
}

@media (forced-colors: active) {
    :host {
        --highcontrast-infield-button-border-color: ButtonText;
        --highcontrast-infield-button-border-color-active: Highlight;
    }

    :host([disabled]) {
        --highcontrast-infield-button-border-color: inherit;
    }

    :host(:is(:active, [active])):not(:disabled),
    :host:not(:disabled):focus-visible {
        --highcontrast-infield-button-border-color: var(--highcontrast-infield-button-border-color-active);
    }

    @media (hover: hover) {
        :host:not(:disabled):hover {
            --highcontrast-infield-button-border-color: var(--highcontrast-infield-button-border-color-active);
        }
    }
}

:host {
    background-color: initial;
    cursor: pointer;
    block-size: var(--mod-infield-button-height, var(--spectrum-infield-button-height));
    inline-size: var(--mod-infield-button-width, var(--spectrum-infield-button-width));
    padding: var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill));
    border-style: none;
    justify-content: center;
    align-items: center;
    display: flex;
}

:host([disabled]) {
    cursor: auto;
}

:host(:focus-visible) {
    outline: none;
}

:host([block="end"]),
:host([block="start"]) {
    block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2);
}

:host([block="start"]) {
    padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
}

:host([block="end"]) {
    padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
}

.fill {
    block-size: 100%;
    inline-size: 100%;
    background-color: var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color));
    border-width: var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width));
    border-style: solid;
    border-color: var(--highcontrast-infield-button-border-color, var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color)));
    padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding));
    align-items: center;
    justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content));
    transition: border-color var(--spectrum-animation-duration-100) ease-in-out;
    border-start-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
    border-start-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
    border-end-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
    border-end-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
    display: flex;
}

:host([inline="end"]) .fill {
    border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
    border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
}

:host([inline="start"]) .fill {
    border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
    border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
}

:host([block="end"]) .fill,
:host([block="start"]) .fill {
    box-sizing: border-box;
    padding-inline-start: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
    padding-inline-end: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
}

:host([block="start"]) .fill {
    border-block-end: none;
    border-start-start-radius: var(--mod-infield-button-stacked-top-border-radius-start-start, var(--spectrum-infield-button-stacked-top-border-radius-start-start));
    border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
    border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
    padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
    padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)));
}

:host([block="end"]) .fill {
    border-block-end-width: var(--mod-infield-button-stacked-bottom-border-block-end-width, var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
    border-start-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
    border-start-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
    border-end-end-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-end, var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)));
    border-end-start-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start));
    padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
    padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
}

::slotted(*) {
    display: initial;
    color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color));
    flex-shrink: 0;
    margin: 0 !important;
}
